
<div ng-controller="AnnotationsEditorCtrl">
	<h3 class="dashboard-settings__header">
		<a ng-click="ctrl.backToList()"><!--Annotations-->标注</a>
		<span ng-show="ctrl.mode === 'new'">&gt; <!--New-->新建</span>
		<span ng-show="ctrl.mode === 'edit'">&gt; <!--Edit-->编辑</span>
	</h3>

	<div ng-if="ctrl.mode === 'list'">
		<div class="page-action-bar" ng-if="ctrl.annotations.length > 1">
			<div class="page-action-bar__spacer"></div>
			<a type="button" class="btn btn-success" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a>
		</div>

		<table class="filter-table filter-table--hover">
			<thead>
				<tr>
					<th><!--Query name-->查询的名称</th>
					<th><!--Data source-->数据源</th>
					<th colspan="3"></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="annotation in ctrl.annotations track by annotation.name">
					<td style="width:90%" ng-hide="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
						<i class="fa fa-comment" style="color:{{annotation.iconColor}}"></i> &nbsp;
						{{annotation.name}}
					</td>
					<td style="width:90%" ng-show="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
						<i class="gicon gicon-annotation"></i> &nbsp;
						<em class="muted">{{annotation.name}} (Built-in)</em>
					</td>
					<td class="pointer" ng-click="ctrl.edit(annotation)">
						{{annotation.datasource || 'Default'}}
					</td>
					<td style="width: 1%"><i ng-click="ctrl.move($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
					<td style="width: 1%"><i ng-click="ctrl.move($index,1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
					<td style="width: 1%">
						<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
							<i class="fa fa-remove"></i>
						</a>
					</td>
				</tr>
			</tbody>
		</table>

		<!-- empty list cta, there is always one built in query -->
		<div ng-if="ctrl.annotations.length === 1" class="p-t-2">
			<div class="empty-list-cta">
				<div class="empty-list-cta__title"><!--There are no custom annotation queries added yet-->尚未添加自定义标注查询</div>
				<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
					<i class="gicon gicon-add-annotation"></i>
					<!--Add Annotation Query-->添加标注查询
				</a>
				<div class="grafana-info-box">
					<h5><!--What are Annotations?-->什么是标注？</h5>
					<p>
					<!--Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons
					on all graph panels. When you hover over an annotation icon you can get event text &amp; tags for the event. You can add annotation events
					directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database.-->标注提供了将事件数据集成到图形中的方法。它们在所有的图形面板上被可视化为垂直的线条和图标。当您将鼠标悬停在标注图标上时，您可以获得事件文本以及该事件的标签。通过按住 CTRL 键或 CMD 键，再点击图形（或拖动区域），您可以直接 在Grafana 上添加标注事件。这些信息会被存储在 ATOPS 的标注数据库中。
					</p>
					<!--查看 <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">标注文档</a> 以了解更多信息。-->
				</div>
			</div>
		</div>
	</div>

	<div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'">
		<div class="gf-form-group">
			<h5 class="section-heading">常规</h5>
			<div class="gf-form-inline">
				<div class="gf-form">
					<span class="gf-form-label width-7"><!--Name-->名称</span>
					<input type="text" class="gf-form-input width-20" ng-model='ctrl.currentAnnotation.name' placeholder="名称"></input><!--name-->
				</div>
				<div class="gf-form">
					<span class="gf-form-label width-7"><!--Data source-->数据源</span>
					<div class="gf-form-select-wrapper">
						<select class="gf-form-input" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select>
					</div>
				</div>
			</div>
		</div>

		<div class="gf-form-group">
			<div class="gf-form-inline">
				<gf-form-switch class="gf-form" label="已启用" checked="ctrl.currentAnnotation.enable" label-class="width-7">
				</gf-form-switch>
				<gf-form-switch class="gf-form" label="已隐藏" tooltip="隐藏标注查询，不让其显示在仪表板顶部" checked="ctrl.currentAnnotation.hide" label-class="width-7">
				</gf-form-switch>
				<div class="gf-form">
					<label class="gf-form-label width-9"><!--Color-->颜色</label>
					<span class="gf-form-label">
						<color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker>
					</span>
				</div>
			</div>
		</div>

		<h5 class="section-heading"><!--Query-->查询</h5>
		<rebuild-on-change property="ctrl.currentDatasource">
			<plugin-component type="annotations-query-ctrl">
			</plugin-component>
		</rebuild-on-change>

		<div class="gf-form">
			<div class="gf-form-button-row p-y-0">
				<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()"><!--Add-->添加</button>
				<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()"><!--Update-->更新</button>
			</div>
		</div>
	</div>
</div>
